<template>
    <div class="recList">
        <transition-group
                name="list"
                enter-active-class="animated fadeIn"
                leave-active-class="animated fadeOut"
        >
        <el-card class="box-card" v-for="(post,index) in posts" :key="index">
            <div slot="header" class="clearfix">
                <span><a class="header-title" :href="'#/struct_2/'+post.id">{{post.title}}</a></span>
                <!--<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
            </div>
            <img  v-lazy="post.meta.img" class="image"  @mouseover="enter(post.id)" @mouseout="leave(post.id)">
            <span class="card-title">
                    <a :href="'#/struct_2/'+post.id" :class="'show-'+post.id">{{post.title}}</a>
            </span>
            <div class="date-btn">
                <span class="month">{{post.month+'月'}}</span>
                <span class="day">{{post.day}}</span>
            </div>
        </el-card>
        </transition-group>
    </div>
</template>

<script>
    import {getScrollTop,getScrollHeight,getWindowHeight,addEvent,buildParams,log} from '@/assets/js/util.js'
    export default{
        props:['bus'],
        name: 'recList',
        data () {
            return {
                posts:[],
                msg: 'recList',
                nextUrl:'',
                show:false,
            }
        },
        methods:{
            handleScroll:function () {
                if(getScrollTop() + getWindowHeight() == getScrollHeight()){
                    //log('到底了');
                    if(this.nextUrl){
                        this.init(this.nextUrl);
                    }
                }
            },
            handleSearch:function (key) {
                log(key)
                var params = []
                params[0] = 'keyword='+key
                this.init(null,params,'search')
            },
            handleDate:function (date) {
                log(date)
                var params = []
                params[0] = 'date='+date
                this.init(null,params,'search')
            },
            handleCate:function (cate) {
                log(cate)
                var params = []
                params[0] = 'cate='+cate
                this.init(null,params,'search')
            },
            init:function (url,params,type) {
                if(!url)url = server_url+'/api/posts'
                url = url + buildParams(params);
                this.$http.jsonp(url, {}, {
                    headers: {},
                    emulateJSON: true
                }).then(function(response) {
                    var data = response.data.data.data
                    this.nextUrl = response.data.data.next_page_url
                    if(type == 'search'){
                        this.posts = data
                    }else{
                        this.posts = this.posts.concat(data)
                    }
                }, function(response) {
                    log(response)
                });
            },
            enter:function (id) {
//                log(id+'enter')
//                let eles = document.getElementsByClassName('show-'+id);
//                for(var i = 0; i<eles.length; i++){
//                    //eles[i].classList.add('show')
////                    eles[i].classList.add('bounceInUp')
//                }
            },
            leave:function (id) {
//                log(id+'leave')
//                let eles = document.getElementsByClassName('show-'+id);
//                for(var i = 0; i<eles.length; i++){
////                    eles[i].classList.remove('bounceInUp')
////                    eles[i].classList.add('bounceOutDown')
////                    eles[i].classList.remove('show')
////                    eles[i].classList.remove('bounceOutDown')
//                }
            }
        },
        mounted: function() {
            this.init()
            addEvent(window,'scroll', this.handleScroll)
            this.bus.$on('sendKey', this.handleSearch)
            this.bus.$on('sendDate',this.handleDate)
            this.bus.$on('sendCate',this.handleCate)
        },
    }
</script>

<style>
    .recList{
        /*margin-top: 10px;*/
    }
    .recList .box-card{
        margin-bottom: 10px;
    }
    .el-card__body{
        position: relative;
    }
    .card-title{
        color: #fff;
        position: absolute;
        bottom: 0;
        left: 0;
        max-width: 100%;
        padding: 72px;
        font-size: 24px;
        font-weight: 300;
    }
    .card-title a{
        color:#fff;
        text-decoration: none;
    }
    .header-title{
        text-decoration: none;
        color:#409EFF;
    }
    .image{
        width: 100%;
    }
    .date-btn{
        box-sizing: border-box;
        position: absolute;
        right: 0px;
        /*bottom: 0px;*/
        top:0px;
        height: 70px;
        width: 70px;
        border-radius: 100px;
        color: #fff;
        background-color: #409eff;
        border-color: #409eff;
        padding-top: 10px;
    }
    .month{
        margin: 0;
        text-align: center;
        display: block;
    }
    .day{
        margin: 0;
        text-align: center;
        display: block;
        font-size: 30px;
        font-weight: bold;
        margin-top: -5px;
    }
    [class^="show-"]{
        /*display: none;*/
    }
    .show{
        display: block;
    }
</style>